<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select id="province" onchange="changeProvince()">
      <option value="">---请选择省份---</option>
      <option value="shaanxi">陕西省</option>
      <option value="gansu">甘肃省</option>
      <option value="sichuan">四川省</option>
      <option value="qinghai">青海省</option>
    </select>

    <select id="city">
      <option>---请选择市---</option>
    </select>

    <script>
      let province = document.querySelector("#province");
      let city = document.querySelector("#city");

      let citys = {
        shaanxi: [
          {
            "xi'an": "西安市",
          },
          {
            xianyang: "咸阳市",
          },
          {
            baoji: "宝鸡市",
          },
          {
            tongchuan: "铜川市",
          },
          {
            yanan: "延安市",
          },
          {
            weinan: "渭南市",
          },
          {
            hanzhong: "汉中市",
          },
          {
            yulin: "榆林市",
          },
          {
            ankang: "安康市",
          },
          {
            shangluo: "商洛市",
          },
        ],
        gansu: [
          {
            lanzhou: "兰州市",
          },
          {
            jiayuguan: "嘉峪关市",
          },
          {
            jinchang: "金昌市",
          },
          {
            baiyin: "白银市",
          },
          {
            tianshui: "天水市",
          },
          {
            wuwei: "武威市",
          },
          {
            zhangye: "张掖市",
          },
          {
            pingliang: "平凉市",
          },
          {
            jiuquan: "酒泉市",
          },
          {
            qingyang: "庆阳市",
          },
          {
            dingxi: "定西市",
          },
          {
            longnan: "陇南市",
          },
          {
            linxia: "临夏市",
          },
          {
            gannan: "甘南市",
          },
        ],
        sichuan: [
          {
            chengdu: "成都市",
          },
          {
            zigong: "自贡市",
          },
          {
            panzhihua: "攀枝花市",
          },
          {
            luzhou: "泸州市",
          },
          {
            deyang: "德阳市",
          },
          {
            mianyang: "绵阳市",
          },
          {
            guangyuan: "广元市",
          },
          {
            suining: "遂宁市",
          },
          {
            neijiang: "内江市",
          },
          {
            leshan: "乐山市",
          },
          {
            nanchong: "南充市",
          },
          {
            meishan: "眉山市",
          },
          {
            yibin: "宜宾市",
          },
          {
            guangan: "广安市",
          },
          {
            dazhou: "达州市",
          },
          {
            yaan: "雅安市",
          },
          {
            bazhong: "巴中市",
          },
          {
            ziyang: "资阳市",
          },
          {
            aba: "阿坝市",
          },
          {
            ganzi: "甘孜市",
          },
          {
            liangshan: "凉山市",
          },
        ],
        qinghai: [
          {
            xining: "西宁市",
          },
          {
            haidong: "海东市",
          },
          {
            haibei: "海北市",
          },
          {
            huangnan: "黄南市",
          },
          {
            hainan: "海南市",
          },
          {
            guoluo: "果洛市",
          },
          {
            yushu: "玉树市",
          },
          {
            haixi: "海西市",
          },
        ],
      };
      function changeProvince() {
        if (province.value) {
          // 清除原有的市
          city.innerHTML = "<option>---请选择市---</option>";
          // 对应市添加到第二个下拉框中
          let options = citys[province.value];
          for (let index = 0; index < options.length; index++) {
            const element = options[index];
            let option = document.createElement("option");
            for (const key in element) {
              option.value = key;
              option.innerText = element[key];
            }
            city.appendChild(option);
          }
        }
      }
    </script>
  </body>
</html>
